<template>
  <view class="my-card-edit">
    <view class="my-top">
      <view class="content">
        <u-cell-group>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">持卡人</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ cardInfo.realName || "--" }}</text>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">卡号</text>
            </view>
            <view slot="value" class="tips1">
              <view class="u-cell4"
                ><u-input
                  maxlength="20"
                  type="number"
                  placeholder="请输入卡号"
                  v-model="cardInfo.bankId"
                ></u-input>
              </view>
            </view>
          </u-cell>
          <u-cell @click="show3 = true" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">银行</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ cardInfo.bankName || "请选择" }}</text>
            </view>
          </u-cell>
          <u-cell @click="show2 = true" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">开户行所在地</text>
            </view>
            <view slot="value" class="tips1 flag">
              <popupActivity
                class="u-cell4 flag"
                :newselectVal="[
                  cardInfo.provinceName || '',
                  cardInfo.cityName || '',
                  cardInfo.areaName || '',
                ]"
                @change="change"
              >
                <view v-if="cityFlag" class="city-name">{{
                  cardInfo.provinceName + cardInfo.cityName + cardInfo.areaName
                }}</view>
                <view
                  v-else
                  class="city-name"
                  style="display: flex; padding-left: 30vw"
                  >请选择</view
                >
              </popupActivity>
              <!-- <text class="u-cell4">{{
                cardInfo.provinceName + cardInfo.cityName + cardInfo.areaName
              }}</text> -->
            </view>
          </u-cell>

          <u-cell @click="bankFun" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">支行名称</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{
                cardInfo.bankAddress || "请选择"
              }}</text>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
    <view class="bottom" @click="subFun">下一步，提交证件资料</view>
    <u-picker
      @cancel="show1 = false"
      @confirm="confirm1"
      @close="show1 = false"
      :show="show1"
      :columns="columns1"
    ></u-picker>
    <!-- <u-picker
      @cancel="show2 = false"
      @confirm="confirm2"
      @close="show2 = false"
      :show="show2"
    >
      <popupActivity @change="change">{{ txt }}</popupActivity>
    </u-picker> -->
    <!-- <popupActivity @change="change">{{ txt }}</popupActivity> -->
    <!-- <uni-data-picker
      placeholder="请选择地址"
      popup-title="请选择城市"
      collection="opendb-city-china"
      field="code as value, name as text"
      orderby="value asc"
      :step-searh="true"
      self-field="code"
      parent-field="parent_code"
      @change="onchange"
      @nodeclick="onnodeclick"
    >
    </uni-data-picker> -->

    <u-picker
      @cancel="show3 = false"
      @confirm="confirm3"
      @close="show3 = false"
      :show="show3"
      :columns="columns3"
    ></u-picker>
    <u-popup
      :show="showModal"
      :round="4"
      mode="center"
      closeable
      @close="closePop"
    >
      <view class="pop-content">
        <view class="pop-t">绑定银行卡需要验证您的身份</view>
        <view class="pop-tips"
          >验证码发送至{{ dealNum("phone", userInfo.userName) }}</view
        >
        <view class="content1">
          <u-input
            placeholder="请输入验证码"
            :maxlength="10"
            type="number"
            :height="40"
            :focus="false"
            v-model="smsCode"
            border="none"
          >
            <template slot="suffix">
              <text @click="getCode" class="tips">{{
                tips || time + "s"
              }}</text>
            </template>
          </u-input>
        </view>
        <view class="sub1">
          <u-button
            v-if="smsCode.trim()"
            @click="getSubmit"
            type="primary"
            :text="textNew"
          ></u-button>
          <u-button v-else type="primary" disabled="disabled">{{
            textNew
          }}</u-button>
        </view>
      </view>
    </u-popup>
    <u-popup :show="showBank" @close="closeBank">
      <view class="my-bank-box">
        <myBank class="my-bank" v-if="showBank" @updateData="updateData" />
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
const globalData = app.globalData;
const wxImg = globalData.wxImg;
import {
  getStoreData,
  setStoreData,
  dealNum,
  httpPost,
  httpGet,
} from "@/utils/http.js";
const pic1 = require(`@/img/my/my1.png`);
import popupActivity from "./component/popupActivity";
import myBank from "./component/myBank";
export default {
  data() {
    return {
      showBank: false,
      textNew: "确认编辑银行卡",
      smsCode: "",
      dealNum,
      tips: "点击获取",
      time: 60,
      showModal: false,
      cardList: [],
      show3: false,
      bankId: "",
      columns3: [],
      applyPayWay: "银行卡",
      columns2: [["银行卡"]],
      show2: false,
      show1: false,
      cashType: "分账补贴", //5分账补贴，消费券12，4零钱
      columns1: [["分账补贴", "优惠补贴", "消费券", "零钱"]],
      wxImg,
      dealNum,
      pic1,
      cardInfo: {},
      userInfo: {},
      isAddCard: false,
      cityFlag: false,
    };
  },
  components: {
    popupActivity,
    myBank,
  },
  onShow: function () {
    // this.cardInfo = getStoreData("cardObjNew");
  },
  onLoad() {
    this.cardInfo = getStoreData("cardObjNew");
    this.userInfo = getStoreData("userInfo");
    this.getCardList();
    if (!this.cardInfo.realName) {
      this.cardInfo.realName = this.userInfo.realName;
    }
    if (
      this.cardInfo.provinceName &&
      this.cardInfo.cityName &&
      this.cardInfo.areaName
    ) {
      this.cityFlag = true;
    } else {
      this.cityFlag = false;
    }
    if (this.cardInfo && this.cardInfo.bankId) {
      this.isAddCard = false;
    } else {
      this.isAddCard = true;
      uni.setNavigationBarTitle({
        title: "添加银行卡",
      });
      this.textNew = "添加银行卡";
    }
  },
  methods: {
    updateData(bankName) {
      this.cardInfo = {
        ...this.cardInfo,
        bankAddress: bankName,
      };
      this.showBank = false;
    },
    bankFun() {
      if (!this.cardInfo.bankName || !this.cardInfo.areaName) {
        uni.$u.toast("请先选择银行和开户行所在地");
      } else {
        this.showBank = true;
      }
    },
    closeBank() {
      this.showBank = false;
    },
    getCode() {
      const _this = this;
      if (this.time < 60) {
        uni.showToast({
          title: "请在" + this.time + "s后获取",
          icon: "none", //默认success
          duration: 1500,
        });
        return;
      }
      httpGet("/api/sms/send/identity/" + this.userInfo.userName)
        .then((res) => {
          _this.tips = "";
          _this.timer = setInterval(() => {
            _this.time--;
            if (_this.time <= 0) {
              _this.time = 60;
              _this.tips = "点击获取";
              clearInterval(_this.timer);
            }
          }, 1000);
        })
        .catch((e) => {});
    },
    closePop() {
      this.showModal = false;
      // console.log('close');
    },
    subFun() {
      const flag =
        uni.$u.test.digits(this.cardInfo.bankId) &&
        uni.$u.test.rangeLength(this.cardInfo.bankId, [13, 19]);
      if (flag) {
        this.showModal = true;
      } else {
        uni.showToast({
          title: "请填写正确的银行卡号",
          icon: "none", //默认success
          duration: 1500,
        });
      }
    },
    change(data) {
      this.cardInfo.provinceName = data.data[0];
      this.cardInfo.cityName = data.data[1];
      this.cardInfo.areaName = data.data[2];
      this.cityFlag = true;
    },
    confirm3(e) {
      this.cardInfo.bankName = e.value[0];
      this.show3 = false;
    },
    getSubmit() {
      const _wx = wx;
      const parmas = {
        areaName: this.cardInfo.areaName || "",
        bankAddress: this.cardInfo.bankAddress || "",
        bankId: this.cardInfo.bankId || "",
        bankName: this.cardInfo.bankName || "",
        cityName: this.cardInfo.cityName || "",
        provinceName: this.cardInfo.provinceName || "",
        realName: this.cardInfo.realName || "",
        smsCode: this.smsCode || "",
        id: this.cardInfo.id || "",
      };
      let url = "/api/userbankcard/update";
      if (this.isAddCard) {
        delete parmas.id;
        url = "/api/userbankcard/save";
      }
      httpPost(url, parmas)
        .then((res) => {
          uni.showToast({
            title: "操作成功",
            icon: "none", //默认success
            duration: 1500,
          });
          setStoreData("refresh", true);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1, // 返回上一级页面。
            });
          }, 1500);
        })
        .catch((e) => {});
    },
    cashTypeFun(v) {
      switch (v) {
        case "分账补贴":
          return 5;
        case "优惠补贴":
          return 14;
        case "消费券":
          return 12;
        case "零钱":
          return 4;
        default:
          return 5;
      }
    },
    confirm2(e) {
      this.applyPayWay = e.value[0];
      this.show2 = false;
    },
    confirm1(e) {
      this.cashType = e.value[0];
      this.show1 = false;
    },
    getCardList() {
      const _this = this;
      httpGet("/api/banklist/listTop")
        .then((res) => {
          _this.cardList = res.data;
          const a = res.data.map((i) => {
            return i.bankName;
          });
          // _this.bankId = a[0];
          _this.columns3 = [a];
        })
        .catch((e) => {
          //
        });
    },
  },
};
</script>

<style lang="scss">
.pop-content {
  .pop-t {
    padding-top: 32px;
    height: 36px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #333333;
    line-height: 36px;
    margin: 6px 48px;
  }
  .pop-tips {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    margin: 6px 0;
    color: #aaaaaa;
    line-height: 36px;
    text-align: center;
  }
  .sub1 {
    margin: 36px 0 24px 0;
    /deep/.u-button {
      width: calc(100% - 48px);
      height: 50px;
      line-height: 50px;
      font-size: 16px;
    }
  }
  .tips {
    font-size: 15px;
    position: relative;
    color: #f39a15;
    height: 50px;
    line-height: 50px;
    padding-left: 16px;
    display: inline-block;
    min-width: 60px;
    text-align: center;
    &::before {
      position: absolute;
      content: "";
      width: 1px;
      left: 6px;
      top: 18px;
      height: 16px;
      background: #f39a15;
    }
  }

  .content1 {
    margin: 0 32px 16px 32px;
    border-bottom: 1px solid #eee;
    /deep/.u-input__content__field-wrapper__field {
      text-align: left !important;
    }
    /deep/.u-input {
      height: 50px;
      line-height: 50px;
      text-align: left !important;
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }
    }
  }
}
.my-card-edit {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  padding: 16px;
  position: relative;

  .my-bank-box {
    height: 80vh;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #fff;
    position: fixed;
    .my-bank {
      width: 100%;
      height: 100%;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100vw;
    display: flex;
    color: #fff;
    padding-bottom: 10px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #3cbaf6, #56d1fc);
  }
  /deep/.u-input__content__field-wrapper__field,
  /deep/.u-input {
    border: none !important;
    text-align: right !important;
  }
  .sub {
    margin: 36px 0;
    /deep/.u-button {
      width: calc(100vw - 48px);
      height: 50px;
      line-height: 50px;
      margin-bottom: 24px;
      font-size: 16px;
    }
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-direction: column;
    width: calc(100vw - 32px);
    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .tips1.flag {
    min-width: 50vw;
    display: flex;
    justify-content: flex-end;
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: column;
    .u-cell1 {
      font-size: 16px;
      line-height: 30px;
      color: #333;
    }
    .u-cell2 {
      font-size: 14px;
      margin-left: 6px;
      line-height: 30px;
      color: #f39d21;
    }
    .u-cell3 {
      font-size: 14px;
      line-height: 30px;
      color: #999;
      min-width: 70px;
    }
    .u-cell4 {
      font-size: 14px;
      line-height: 30px;
      color: #333;
      &.flag {
        min-width: 50vw;
        display: flex;
        justify-content: flex-end;
        text-align: right;
      }
    }
  }
  .my-top {
    display: flex;
    flex-direction: column;
    width: 100%;
    .ava {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
    }
  }
}
</style>
